<template>
    <!--最高价 maxPrice 最低价 minPrice 营业执照 businessLicense 主营业商品 mainCommodityList -->
    <!--结构
      channelId (integer, optional): 渠道ID ,
      createdBy (integer, optional): 创建人 ,
      createdByName (string, optional): 创建人名称 ,
      createdTime (string, optional): 创建时间 ,
      fileKey (string, optional): 文件key ,
      fileUrl (string, optional): 文件url ,
      id (integer, optional): 编码 ,
      orderNumber (integer, optional): 序号 ,
      type (integer, optional): 类型 (1-营业执照,2-主营商品图片) ,
      updatedBy (integer, optional): 更新人 ,
      updatedByName (string, optional): 更新人名称 ,
      updatedTime (string, optional): 更新时间
  -->
    <div class="finance-group">
        <slot name="title" />
        <formlist ref="formList" class="mailField" :formList="formList" :formData="formData" :disabled="disabled" :status="status">
            <template v-slot:MinimumMaximumPurchasePrice="{ row: item, formData }">
                <el-form-item :label="$t(item.lang) || item.label" :prop="item.value" :rules="item.rules">
                    <div style="display: flex">
                        <base-input
                            key="minPrice"
                            :value.sync="formData['minPrice']"
                            :formData="formData"
                            contentKeys="minPrice"
                            :disabled="item.alwaysDisabled || item.disabled || disabled"
                            style="width: 60px"
                        />
                        <span style="padding: 0 10px">-</span>
                        <base-input
                            key="maxPrice"
                            :value.sync="formData['maxPrice']"
                            :formData="formData"
                            contentKeys="maxPrice"
                            :disabled="item.alwaysDisabled || item.disabled || disabled"
                            style="width: 60px"
                        />
                    </div>
                </el-form-item>
            </template>
            <template v-slot:empty="{ row: item }">
                <el-form-item :label="$t(item.lang) || item.label" :prop="item.value" :rules="item.rules">
                    <span />
                </el-form-item>
            </template>
            <template v-slot:businessLicense="{ row: item, formData }">
                <el-form-item :label="$t(item.lang) || item.label" :prop="item.value" :rules="item.rules">
                    <image-upload-form-item
                        :imagesArrays.sync="formData[item.value]"
                        :formData="formData"
                        :disabled="disabled"
                        :parameters="{ type: 1 }"
                        :limit="1"
                        msg="建议尺寸800*800像素，最多上传1张，单个图片不能超过20M"
                        :config="item"
                    />
                </el-form-item>
            </template>
            <template v-slot:mainCommodityList="{ row: item, formData }">
                <el-form-item :label="$t(item.lang) || item.label" :prop="item.value" :rules="item.rules">
                    <image-upload-form-item
                        :imagesArrays.sync="formData[item.value]"
                        :formData="formData"
                        :keyFiled="keyFiled"
                        :disabled="disabled"
                        :parameters="{ type: 2 }"
                        msg="建议尺寸800*800像素，你可以拖拽图片调整顺序，最多上传5张，单个图片不能超过20M"
                        :limit="5"
                        :config="item"
                    />
                </el-form-item>
            </template>
        </formlist>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, Watch } from 'vue-property-decorator';
@Component({
    name: 'mall-field',
    components: {
        formlist: () => import('@/components/formlist/index.vue'),
        baseInput: () => import('@/components/base-input/index.vue'),
        imageUploadFormItem: () => import('../components/image-upload-form-item/index.vue')
    }
})
export default class detail extends Vue {
    @Prop({ default: false }) disabled: boolean;
    @Prop({ required: true }) formData: object;
    @Prop({ required: true }) formList: any[];
    @Prop() status;
    @Prop() keyFiled: string;
    mounted() {
        console.log(this.formList);
    }
}
</script>

<style lang="scss" scoped>
@import 'src/styles/variables.scss';
</style>
<style lang="scss"></style>
